<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>index.html</title>

	<style>
		* {
			padding: 0;
			margin: 0;
			border: 0 none;
			outline: 0 none;
			box-sizing: border-box;
		}

		body {
			font-size: 12px;
			line-height: 1.5em;
			padding: 0 16px;
		}

		input:checked ~ span > .log {
			display: none;
		}

		q::before, q::after {
			content: "";
		}

		span, q {
			display: block;
		}

		q {
			white-space: pre;
		}

		div > span::after {
			padding: 0 1em;
			position: fixed;
			color: red;
			right: 0;
			top: 0;
			content: "总错误数：" counter(error);
		}

		.log {
			counter-increment: log;
		}

		.log::before {
			content: counter(log)".";
			margin-right: 2px;
		}

		.warn {
			color: orange;
		}

		.error {
			color: red;
			counter-increment: error;
			padding-left: 1em;
			text-indent: -1em;
		}

		.group {
			font-weight: bold;
			font-size: 14px;
			padding: 2px 0;
		}
	</style>
</head>
<body>
	<div>
		只显示警告和错误：
		<input type="checkbox" />
		<br />
		<br />
		<span></span>
	</div>
	<footer>
		<script src="../source/rex-core.js"></script>
		<script src="../source/rex-syntax.js"></script>
		<script src="../source/rex-es.js"></script>
		<script src="../source/rex-helper.js"></script>
		<script src="rex-test.js"></script>
		
		<script>
			new function(){
				var span = document.querySelector("span");
				var checkbox = document.querySelector("input");

				window.a = 0;
				checkbox.checked = localStorage.getItem("hideLog") === "1";

				checkbox.onchange = function(){
					localStorage.setItem(
						"hideLog",
						checkbox.checked ? "1" : "0"
					);
				}

				function append(info){
					var q = document.createElement("q")

					q.appendChild(
						document.createTextNode(info)
					);

					span.appendChild(q);
					return q;
				}

				console.log = function(info){
					append(info).className = "log";
				};

				console.warn = function(info){
					append(info).className = "warn";
				};

				console.error = function(info){
					var el = append(info)

					el.className = "error";
					
					el.appendChild(
						document.createElement("br")
					);

					el.appendChild(
						document.createTextNode(
							new Error().stack
						)
					);
				};

				// Rexjs.ECMAScriptConfig.all(false, "es6-base");

				console.group = function(name){
					append(name).className = "group";
				}

				console.groupEnd = function(){}

				window.test = new Rexjs.SimpleTest(
					new Rexjs.ECMAScriptParser()
				);
			}();
		</script>

		<script src="array/index.js"></script>
		<script src="arrow/index.js"></script>
		<script src="binary/index.js"></script>
		<script src="block/index.js"></script>
		<script src="bracketAccessor/index.js"></script>
		<script src="break/index.js"></script>
		<script src="call/index.js"></script>
		<script src="class/index.js"></script>
		<script src="comma/index.js"></script>
		<script src="comment/index.js"></script>
		<script src="const/index.js"></script>
		<script src="continue/index.js"></script>
		<script src="destructuring/index.js"></script>
		<script src="do-while/index.js"></script>
		<script src="dot/index.js"></script>
		<script src="for/index.js"></script>
		<script src="function/index.js"></script>
		<script src="grouping/index.js"></script>
		<script src="if/index.js"></script>
		<script src="label/index.js"></script>
		<script src="let/index.js"></script>
		<script src="module/index.js"></script>
		<script src="number/index.js"></script>
		<script src="object/index.js"></script>
		<script src="regexp/index.js"></script>
		<script src="return/index.js"></script>
		<script src="semicolon/index.js"></script>
		<script src="spread/index.js"></script>
		<script src="string/index.js"></script>
		<script src="super/index.js"></script>
		<script src="switch/index.js"></script>
		<script src="target/index.js"></script>
		<script src="template/index.js"></script>
		<script src="ternary/index.js"></script>
		<script src="throw/index.js"></script>
		<script src="try-function/index.js"></script>
		<script src="try-catch/index.js"></script>
		<script src="unary/index.js"></script>
		<script src="var/index.js"></script>
		<script src="variable/index.js"></script>
		<script src="while/index.js"></script>
	</footer>
</body>
</html>
